<template>
	<view class="container">
		<view class="card">
			<view class="title flex-row"><view class="name">培训信息</view></view>
			<view class="item"><view>培训主题：{{ form.topic }}</view></view>
			<view class="item"><view>培训内容：{{ form.content || '无' }}</view></view>
			<view class="item"><view>学习状态：<text :class="{error: !form.attend}">{{ form.attend ? '已学习' : '未参与' }}</text></view></view>
			
			<view class="title flex-row"><view class="name">培训附件</view></view>
			<view class="item"><view>培训附件：<text @click="toStudy">点击学习</text></view></view>
		</view>
		<view @click="goBack" class="btn">返回上级</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			form: {}
		}
	},
	onLoad(){
		this.form = uni.getStorageSync('onlineStudyDetail');
	},
	onBackPress(){
		uni.removeStorageSync('onlineStudyDetail');
		uni.removeStorageSync('onlieStudyStartTimes');
	},
	onShow(){
		let startTime = uni.getStorageSync('onlieStudyStartTimes');
		if(startTime){	// 计算时间差
			let nowTime = new Date().getTime();
			let diffTime = nowTime - startTime;
			let minutes = Number.parseInt(diffTime / 60000);
			if(minutes >= 1) this.submitTime(minutes);
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toStudy(){
			if(!this.form.url){
				return uni.showToast({
					icon: 'none',
					title: '地址无效'
				});
			}
			
			// 记录时间
			uni.setStorageSync('onlieStudyStartTimes', new Date().getTime());
			
			// 跳转
			uni.navigateTo({
				url: '../../../jump?src='+encodeURIComponent(this.form.url)
			});
		},
		// 提交时常
		submitTime(minutes){
			uni.request({
				url: this.$API.eduSafeTrainOlineStudySubmitTime,
				data: {
					study_id: this.form.id,
					userid: uni.getStorageSync('userid'),
					time: minutes
				},
				method: 'POST',
				header: this.$API.get_head()
			})
		}
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

/*卡片*/
.card{
	background: #fff;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title view{
	font-size: 28upx;
	margin-top: 12upx;
}
.card .title view.name{
	font-size: 36upx;
}
.card .item text{
	color: #41A4E8;
}
.card .item text.error{
	color: red;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 40upx auto;
	background-color: red;
}
</style>
